<template>
    <div>
        <h2>房型列表</h2>

        <div>
            <span>房型名称:</span>
            <input type="text" v-model="model.HouseTypeName" />
            <input type="button" value="查询" class="btn btn-success" @click="getlist" />
        </div>

        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>Id</td>
                    <td>房型名称</td>
                    <td>售价</td>
                    <td>面积</td>
                    <td>可住人数</td>
                    <td>图片</td>
                    <td>房型介绍</td>
                    <td>是否加床</td>
                    <td>是否含早餐</td>
                    <td>操作</td>
                </tr>




                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{ item.Price }}</td>
                    <td>{{ item.MianJi }}</td>
                    <td>{{ item.NumCount }}</td>
                    <td> <img :src="item.Phone" alt="" width="100" height="100" /></td>
                    <td>{{ item.JieShao }}</td>
                    <td>{{ item.State==1 ? "是" : "否" }}</td>
                    <td>{{ item.ZaoCan==1 ? "含早餐" : "不含早餐" }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="housedel(item.Id)" />
                    </td>
                </tr>
            </tbody>
        </table>
        <span>总条数:{{data.count}}条</span>
        <span>每页条数:{{model.size}}条</span>
        <pan>当前页:{{model.index+'/'+data.page}}页</pan>
    </div>

    <div>
            <input type="button" value="首页" class="btn btn-primary" @click="getpage('a')" />
            <input type="button" value="上一页" class="btn btn-primary" @click="getpage('b')" />
            <span style="color: red;" v-for="item in data.page" :key="item" @click="getpage(item)">{{item}}</span>
            <input type="button" value="下一页" class="btn btn-primary" @click="getpage('c')" />
            <input type="button" value="尾页" class="btn btn-primary" @click="getpage('d')" />
        </div>
</template>

<script setup lang="ts">

import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

let model = reactive({
    HouseTypeName: '',
    index: 1,
    size: 2,

})

let data: any = reactive({
    list: [],
    count: 0,
    page: 0,

})


//房型列表
onMounted(() => {
    getlist();
})



//显示
const getlist = () => {


    axios({
        url: 'https://localhost:7059/api/HouseType/HouseTypeList',
        method: 'get',
        params:  model,
          
    })
   .then((res) => {
    console.log(res);   
        data.list = res.data.list;
        data.count = res.data.count;
        data.page = res.data.page;
    })
    .catch((err) => {
        console.log(err);
    })

}




//删除
const housedel = (Id: any) => {
    

var f=confirm("确定要删除吗？") 
if(f){
    axios({
        url: 'https://localhost:7059/api/HouseType/HouseTypeDel',
        method: 'delete',
        params: { Id: Id },

    })
    .then((res) => {
        console.log(res);
        if (res.data > 0) {
            alert('删除成功');
            getlist();
        }
        else {
            alert('删除失败');
        }
    })
    .catch((err) => {
        console.log(err);
    })
}







}


//分页
const getpage = (str: any) => {

switch (str) {
    case 'a':
        if (model.index == 1) {
            return;
        }

        model.index = 1;
        break;

        case 'b':
        if (model.index == 1) {
            return;
        }
        model.index --;
        break;



        case 'c':
        if (model.index == data.page) {
            return;
        }
        model.index ++;
        break;


        case 'd':
        if (model.index == data.page) {
            return;
        }
        model.index =data.page
        break;
}



getlist();//调用显示函数房型列表

}



</script>

<style scoped></style>